<template>
    <div>
      <my-header title="大厅">
        <img @click="$router.back()" src="../../assets/img/message/back_left.png" slot="imgLeft"/>
      </my-header>
      <div id="scroll_div" style="height: calc(100vh - 100px);overflow: scroll;">
        <!--<div id="shangPing2" style="display: flex;direction: ltr;padding: 5px;">
          <div style="height: 36px;width: 36px">
            <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
          </div>
          <div style="flex: 1;margin-left: 5px">
            <div style="height: 12px;font-size: 10px;color: #b6b6b6;margin-bottom: 10px">张三</div>
            <div style="display:inline-block;width: auto;max-width:90%;direction: ltr;white-space:normal; word-break:break-all;word-wrap:break-word;background: #4accfb;color: white;border-radius: 50px;padding: 10px;box-sizing: border-box">
              1111111111111111111111111111111111
            </div>
          </div>
        </div>
        <div style="display: flex;direction: rtl;padding: 5px;">
          <div style="height: 36px;width: 36px">
            <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
          </div>
          <div style="flex: 1;margin-left: 5px">
            <div style="height: 12px;font-size: 10px;color: #b6b6b6;margin-bottom: 10px">张三</div>
            <div style="display:inline-block;width: auto;max-width:90%;direction: ltr;white-space:normal; word-break:break-all;word-wrap:break-word;background: #4accfb;color: white;border-radius: 50px;padding: 10px;box-sizing: border-box">
              1111111111111111111111111111111111
            </div>
          </div>
        </div>-->
        <div :style="{direction:isOwnerMessage(item.sendUserInfo.id)?'rtl':'ltr'}" v-for="(item,index) in hallMessage" style="display: flex;direction: rtl;padding: 5px;">
          <div style="height: 36px;width: 36px">
            <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
          </div>
          <div style="flex: 1;margin-left: 5px">
            <div style="height: 12px;font-size: 10px;color: #b6b6b6;margin-bottom: 10px">{{item.sendUserInfo.nickname}}</div>
            <div style="display:inline-block;width: auto;max-width:90%;direction: ltr;white-space:normal; word-break:break-all;word-wrap:break-word;background: #4accfb;color: white;border-radius: 50px;padding: 10px;box-sizing: border-box">
              <span>{{item.message_str}}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;align-items: center;padding: 0 5px">
        <div style="flex: 1;">
          <input @keyup.enter="sendMsg(sendStr)" v-model="sendStr" style="outline: none;width:100%;height: 40px;border: 0;padding: 0;margin: 0;background: white;border-radius: 50px;padding-left: 10px;font-size: 15px;box-sizing: border-box"/>
        </div>
        <div @click="sendMsg(sendStr)" :style="{background:sendStr==''?'#69fbf4':'#4accfb'}" style="background: #4accfb;color: white;height: 35px;line-height: 35px;text-align: center;border-radius: 50px;width: 80px;margin: 0 5px">
          发送
        </div>
      </div>
      <!--<button @click="getInfo" style="width: 100%;height: 30px">滚动条</button>-->
    </div>
</template>

<script>
    export default {
      name: "HallChat",
      data(){
          return {
            webSocket:'',
            sendStr:'',
            hallMessage:[],//大厅消息
          }
      },
      //利用计算属性
      computed: {
        vuexWebSocket() {
          return this.$store.state.webSocket;
        },
        vuexHallMessage() {
          return this.$store.state.hallMessage;
        },
        isOwnerMessage(){
          return (id)=>{
            return this.$store.state.userInfo.id==id
          }
        }
      },
      //监听执行
      watch: {
        vuexWebSocket(newVal,oldVal) {
          // console.log(JSON.stringify(newVal))
          // console.log(JSON.stringify(oldVal))
          // console.log(oldVal.readyState+'状态改变成'+newVal.readyState)
          if(oldVal.readyState==1&&newVal.readyState==3){//连接变为断开
            //重练
            this.$store.dispatch('connectWebSocket',{}).then((data)=>{
              this.setSocketMethods(data)
            })
          }
        },
        vuexHallMessage(newVal,oldVal) {
          // console.log(JSON.stringify(newVal))
          // console.log(JSON.stringify(oldVal))
          this.hallMessage=this.$store.getters.getHallMessage
          this.sorollToBottom()
        },
      },
      methods:{
        sorollToBottom(){
          let scroll_div=document.getElementById('scroll_div');
          let isTouch=false
          scroll_div.addEventListener('touchstart',(event)=>{
            // console.log(event)
            isTouch=true
          }, false);
          setTimeout(()=>{
            if(!isTouch){
              scroll_div.scrollTop=scroll_div.scrollHeight-scroll_div.clientHeight
            }
          },500)
        },
        getDatetime() {
          var d = new Date();
          var year = d.getFullYear();
          var month = change(d.getMonth() + 1);
          var day = change(d.getDate());
          var hour = change(d.getHours());
          var minute = change(d.getMinutes());
          var second = change(d.getSeconds());
          function change(t) {
            if (t < 10) {
              return "0" + t;
            } else {
              return t;
            }
          }
          // var time = year + '-' + month + '-' + day + ' '+ hour + ':' + minute + ':' + second;
          var time = year + '-' + month + '-' + day + ' '+ hour + ':' + minute;
          return time;
        },
        getMessageFormat(message){
          let formatMessage={
            receive_type:'HALL',//'GROUP'、'SINGLE'、'HALL'（群聊、单聊、大厅）
            receive_user_id:-1,//发送给谁（SINGLE单聊必填）
            message_str:message,
            created_time_str:this.getDatetime()
          }
          return JSON.stringify(formatMessage)
        },
        sendMsg(sendStr){
          if(sendStr){
            let message_str=this.getMessageFormat(sendStr);
            this.webSocket.send(message_str);
            this.sendStr=''
          }
        },
        setSocketMethods(socket){
          // console.log(socket)
          this.webSocket=socket
        },
        getInfo(){
          //滚动元素
          let scroll_div=document.getElementById('scroll_div');
          scroll_div.scrollTop=scroll_div.scrollHeight-scroll_div.clientHeight
          console.log(scroll_div)
          console.log('内容--div内容宽度：'+scroll_div.scrollWidth)
          console.log('内容--div内容高度：'+scroll_div.scrollHeight)
          console.log('可见区域--div内容高度：'+scroll_div.clientHeight)
          console.log('可见区域--div内容宽度：'+scroll_div.clientWidth)
          console.log('可见区域--div元素视图高度：'+scroll_div.offsetHeight)
          console.log('可见区域--div元素视图宽度：'+scroll_div.offsetWidth)
          //滚动条距离上面位置
          console.log('滚动条--距离上面距离：'+scroll_div.scrollTop)
          console.log('滚动条--距离左边距离：'+scroll_div.scrollLeft)
          console.log('div元素距离左边：'+scroll_div.offsetLeft)
          console.log('div元素距离顶部：'+scroll_div.offsetTop)
          let shangPing2=document.getElementById('shangPing2');
          console.log('(在整个滚动区域)div元素距离左边（左右滚动）：'+shangPing2.offsetLeft)
          console.log('(在整个滚动区域)div元素距离顶部（上下滚动）：'+shangPing2.offsetTop)
          console.log('(在整个滚动区域)div元素底部距离顶部（上下滚动）：'+shangPing2.offsetTop+shangPing2.clientHeight)
          console.log('可见区域--div内容高度：'+shangPing2.clientHeight)
          console.log('可见区域--div内容宽度：'+shangPing2.clientWidth)
        },
      },
      mounted(){
        this.sorollToBottom()
      },
      created(){
        //创建websocket连接保存在vuex中
        if(this.$store.getters.getWebSocketReadyState!=1){
          //连接不成功(连接操作)
          this.$store.dispatch('connectWebSocket',{}).then((data)=>{
            this.setSocketMethods(data)
          })
        }else {
          this.setSocketMethods(this.$store.getters.getWebSocket)
        }
        this.hallMessage=this.$store.getters.getHallMessage
      }
    }
</script>

<style scoped>

</style>
